<template>
  <div class="loginbox">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="6">
        <h2>荧光商城后台管理系统</h2>
        <el-form :model="loginForm">
          <el-form-item>
            <el-input
              class="ne1"
              v-model="loginForm.username"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              class="ne2"
              show-password
              v-model="loginForm.password"
              placeholder="请输入密码"
            ></el-input
          ></el-form-item>
          <el-button type="primary" class="loginbtn" @click="login"
            >登录</el-button
          ></el-form
        ></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    // 登录
    login() {
      this.$axios
        .get("/users?username=" + this.loginForm.username)
        .then((res) => {
          if (this.loginForm.username != 0 && this.loginForm.password != 0) {
            if (res.data.length == 0) {
              this.$notify.error({
                title: "错误",
                message: "没有该用户,请检查用户名!",
              });
              this.loginForm.password = "";
            } else {
              if (res.data[0].password != this.loginForm.password) {
                this.$notify.error({
                  title: "错误",
                  message: "输入密码有误,请重新输入!",
                });
                this.loginForm.password = "";
              } else {
                if (res.data[0].ad == "管理员") {
                  this.$notify({
                    title: "成功",
                    message: "登录成功",
                    type: "success",
                  });
                  let data = {
                    username: this.loginForm.username,
                  };
                  window.sessionStorage.setItem(
                    "appadmin",
                    JSON.stringify(data)
                  );
                  this.$router.push("/home");
                } else {
                  this.$notify.error({
                    title: "错误",
                    message: "该用户不是管理员账号!",
                  });
                }
              }
            }
          } else {
            this.$notify.error({
              title: "错误",
              message: "用户名或密码不能为空!",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.loginbox {
  width: 100%;
  height: 100vh;
  background: #000046; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    rgb(0, 0, 70),
    rgb(28, 181, 224)
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    rgb(0, 0, 70),
    rgb(28, 181, 224)
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.loginbox h2 {
  text-align: center;
  margin-top: 180px;
  margin-bottom: 30px;
  color: #eee;
  font-size: 26px;
}
.loginbtn {
  width: 100%;
}
.ne1 /deep/.el-input__inner {
  background: url(../assets/imgs/用户.png) no-repeat 0 0;
  background-size: 15px 15px;
  background-position: 10px 12px;
  text-indent: 20px;
  background-color: white;
}
.ne2 /deep/.el-input__inner {
  background: url(../assets/imgs/密码.png) no-repeat 0 0;
  background-size: 15px 15px;
  background-position: 10px 12px;
  text-indent: 20px;
  background-color: white;
}
</style>